<template>
  <div class="UEditor">
    <!-- <quill-editor :config="config" v-model="msg" mode="listener" @ready="ready" :destroy="true"></quill-editor> -->
    <quill-editor
      v-model="msg"
      ref="myQuillEditor"
      :options="editorOption"
      @ready="ready($event)"
      @change="onEditorChange"
    ></quill-editor>
    <a-upload
      list-type="picture-card"
      ref="ueditor_upload"
      accept="image/png, image/JPG,image/jpeg"
      :show-upload-list="false"
      class="avatar-uploader"
      :customRequest="customRequest"
    ></a-upload>
  </div>
</template>
<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

// import { ImageResize } from 'quill-image-resize-module'
// import { ImageDrop } from 'quill-image-drop-module'

import Video from '@/utils/video'
Quill.register(Video, true)

// Quill.register('modules/imageResize', ImageResize)
// Quill.register('modules/imageDrop', ImageDrop)

import { uploadUeditorImg } from '@/api/api'
var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'], //引用，代码块
  [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
  [{ list: 'ordered' }, { list: 'bullet' }], //列表
  [{ script: 'sub' }, { script: 'super' }], // 上下标
  [{ indent: '-1' }, { indent: '+1' }], // 缩进
  [{ direction: 'rtl' }], // 文本方向
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
  // [{ color: ['#d3d3d3', '#f2f2f2'] }, { background: [] }], // 字体颜色，字体背景颜色
  [{ font: [] }], //字体
  [{ align: [] }], //对齐方式
  ['clean'], //清除字体样式
  // ['image',] //上传图片、'video' 上传视频
]
export default {
  components: { quillEditor },
  props: {
    styleStr: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    },
    type: {
      type: [String, Number],
      default: '1'
    }
  },
  data () {
    return {
      msg: '',
      editorOption: {
        // scrollingContainer: '#editorcontainer',
        placeholder: '请在这里输入',
        modules: {
          clipboard: {
            // 粘贴版，处理粘贴时候带图片
            matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]]
          },
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: value => {
                if (value) {
                  // upload点击上传事件
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              },
              video: value => {
                if (value) {
                  // upload点击上传事件
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('video', false)
                }
              }
            }
          }
          // imageResize: {
          //   displayStyles: {
          //     backgroundColor: 'black',
          //     border: 'none',
          //     color: 'white',
          //   },
          //   imageDrop: true,
          // },
        }
      },
      glAPI: process.env.VUE_APP_API_BASE_URL
    }
  },
  // watch: {
  //   message(value, old) {
  //     this.msg = value
  //     console.log(value, old, 132)
  //   },
  // },
  methods: {
    ready (editorInstance) {
      var _this = this
      document.querySelector('div.ql-editor').innerHTML = this.message
      editorInstance.on('text-change', function (editor) {
        _this.$emit('change', _this.msg)
      })
    },
    async customRequest (info) {
      let formData = new FormData()
      formData.append('file', info.file)
      formData.append('type', this.type)
      let { result } = await uploadUeditorImg(formData)
      let quill = this.$refs.myQuillEditor.quill
      // 获取光标所在位置
      let length = quill.getSelection().index
      if (info.file.type.indexOf('image') != -1) {
        // 插入图片
        quill.insertEmbed(length, 'image', result.fullPath)
      } else {
        // 插入视频
        quill.insertEmbed(length, 'video', {
          url: result.fullPath,
          controls: 'controls',
          width: '100%',
          height: '100%'
        })
        // var delta = quill.getContents()
      }
      // 调整光标到最后
      quill.setSelection(length + 1)
    },
    handleCustomMatcher (node, Delta) {
      let ops = []
      Delta.ops.forEach(op => {
        if (op.insert && typeof op.insert === 'string') {
          // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
          ops.push({
            insert: op.insert
          })
        } else {
          this.$message.warning('不允许粘贴图片,请手动上传')
        }
      })
      Delta.ops = ops
      return Delta
    },
    onEditorChange (event) {
      this.$emit('inputStringLength', event.quill.getLength())
    }
  }
};
</script>
<style lang="less">
.UEditor {
  .edui-editor-bottomContainer.edui-default {
    display: none;
  }
  .ql-editor {
    height: 500px;
    max-width: 1200px;
    overflow-y: auto;
  }
  .ql-editor.ql-blank::before {
    color: #7cb6ef;
  }
  .ql-editor p {
    color: #7cb6ef;
  }
  .ql-toolbar {
    border-radius: 4px;
    background: #7cb6ef;
    border: 1px solid #0d4d8b;
  }
  .ql-picker-options {
    border-color: #1360ac !important;
    background: #104c8a;
    color: #509eee;
  }
  .ql-picker-item {
    background: #104c8a;
    color: #509eee;
  }
  .ql-container {
    border: 1px solid #1360ac;
  }
}
</style>
